<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="Some CSS classes to move your DOM! Easy-to-use classes that will add different kind of shake to each part of your site." />
	<title>CSShake</title>
	<link href='https://fonts.googleapis.com/css?family=Gentium+Basic' rel='stylesheet' type='text/css'>
	<link href='https://fonts.googleapis.com/css?family=Dancing+Script' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" type="text/css" href="csshake.css">
	<link rel="stylesheet" type="text/css" href="demo.css">
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.9.0/themes/prism-okaidia.min.css">
	<script>
	;(function(i, s, o, g, r, a, m) {
  i['GoogleAnalyticsObject'] = r
  ;(i[r] =
    i[r] ||
    function() {
      ;(i[r].q = i[r].q || []).push(arguments)
    }),
    (i[r].l = 1 * new Date())
  ;(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0])
  a.async = 1
  a.src = g
  m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga')

ga('create', 'UA-48410558-1', 'elrumordelaluz.github.io')
ga('send', 'pageview')
</script>
	<style type="text/css">
		#carbonads {
		  --width: 180px;
		  --font-size: 14px;
		}

		#carbonads {
		  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
		  display: block;
		  overflow: hidden;
		  margin-bottom: 20px;
		  max-width: var(--width);
		  border-radius: 4px;
		  text-align: center;
		  box-shadow: 0 0 0 1px hsla(0, 0%, 0%, .1);
		  background-color: hsl(0, 0%, 98%);
		  font-size: var(--font-size);
		  line-height: 1.5;
			color: #4f5152;
		}

		#carbonads a {
		  color: inherit;
		  text-decoration: none;
		}

		#carbonads a:hover {
		  color: inherit;
		}

		#carbonads span {
		  position: relative;
		  display: block;
		  overflow: hidden;
		}

		.carbon-img {
		  display: block;
		  margin-bottom: 8px;
		  max-width: var(--width);
		  line-height: 1;
		}

		.carbon-img img {
		  display: block;
		  margin: 0 auto;
		  max-width: var(--width) !important;
		  width: var(--width);
		  height: auto;
		}

		.carbon-text {
		  display: block;
		  padding: 0 1em 8px;
			color: #4f5152;
		}

		.carbon-poweredby {
		  display: block;
		  padding: 10px var(--font-size);
		  background: repeating-linear-gradient(-45deg, transparent, transparent 5px, hsla(0, 0%, 0%, .025) 5px, hsla(0, 0%, 0%, .025) 10px) hsla(203, 11%, 95%, .4);
		  text-transform: uppercase;
		  letter-spacing: .5px;
		  font-weight: 600;
		  font-size: 9px;
		  line-height: 0;
		}

		@media only screen and (max-width: 40em) {
		  #carbonads {
		    float: none;
		    margin: 0 auto;
		    max-width: 330px;
		  }
		  #carbonads span {
		    position: relative;
		  }
		  #carbonads > span {
		    max-width: none;
		  }
		  .carbon-img {
		    float: left;
		    margin: 0;
		  }

		  .carbon-img img {
		    max-width: 130px !important;
		  }
		  .carbon-text {
		    float: left;
		    margin-bottom: 0;
		    padding: 8px 20px;
		    text-align: left;
		    max-width: calc(100% - 130px - 3em);
		  }
		  .carbon-poweredby {
		    left: 130px;
		    bottom: 0;
		    display: block;
		    width: 100%;
		  }
		}
		
		@media (min-width: 40em) {
			#carbonads {
				position: fixed;
				right: 35px;
				top: 35px;
			}
		}
	</style>
</head>
<body>
	<div class="main">
		<div class="new-banner">
			<a href="https://elrumordelaluz.github.io/reshake/"><strong>reshake</strong><br>CSShake as a React functional Component</a>
		</div>
		<section class="section home shamrock">
			<div class="glass shake-hard shake-freeze">
			  <i class="bubble"></i>
			  <i class="bubble big"></i>
			  <i class="bubble"></i>
			  <i class="bubble big"></i>
			  <i class="bubble small"></i>
			  <i class="bubble"></i>
			  <i class="bubble"></i>
			  <i class="bubble small"></i>
			  <i class="bubble"></i>
			  <i class="bubble small"></i>
			  <span class="straw"></span>
			</div>
			<h1 title="v1.5.3">CS<span class="shake-constant shake-delay">Shake</span></h1>
			<h4>Some CSS classes to <span class="shake-little">move your DOM!</span></h4>
			<div class="arrow shake-vertical-slow shake-constant"></div>
			<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CKYIK27N&placement=elrumordelaluzgithubiocsshake" id="_carbonads_js"></script>
		</section>
		<section class="section carrot">
			<a href="#classes">
				<h1 id="classes">Classes</h1>
			</a>
			<h4>The basic collection</h4>
			<ul class="previews">
				<li>
					<i class="preview-item shake">
						Bs
						<span class="flip"></span>
					</i>
					<p class="preview-desc">Basic Shake</p>
				</li>
				<li>
					<i class="preview-item shake-slow">
						Ss
						<span class="flip"></span>
					</i>
					<p class="preview-desc">Slow Shake</p>
				</li>
				<li>
					<i class="preview-item shake-little">
						Ls
						<span class="flip"></span>
					</i>
					<p class="preview-desc">Little Shake</p>
				</li>
				<li>
					<i class="preview-item shake-hard">
						Hs
						<span class="flip"></span>
					</i>
					<p class="preview-desc">Hard Shake</p>
				</li>
				<li>
					<i class="preview-item shake-horizontal">
						&#8644;
						<span class="flip"></span>
					</i>
					<p class="preview-desc">Fixed Horizontal</p>
				</li>
				<li>
					<i class="preview-item shake-vertical">
						&#8693;
						<span class="flip"></span>
					</i>
					<p class="preview-desc">Fixed Vertical</p>
				</li>
				<li>
					<i class="preview-item shake-rotate">
						&#8635;
						<span class="flip"></span>
					</i>
					<p class="preview-desc">Fixed Rotation</p>
				</li>
				<li>
					<i class="preview-item shake-opacity">
						Os
						<span class="flip"></span>
					</i>
					<p class="preview-desc">Opacity Shake</p>
				</li>
				<li>
					<i class="preview-item shake-crazy">
						✌
						<span class="flip"></span>
					</i>
					<p class="preview-desc">Crazy Shake</p>
				</li>
				<li>
					<i class="preview-item shake shake-constant">
						&#8455;
						<span class="flip"></span>
					</i>
					<p class="preview-desc">Constant Shake</p>
				</li>
				<li>
					<i class="preview-item shake shake-chunk shake-constant">
						%
						<span class="flip"></span>
					</i>
					<p class="preview-desc">Chunk Shake</p>
				</li>
			</ul>

			<ul class="previews smalls shake-trigger">
				<li><i class="preview-item small shake-hard"></i></li>
				<li><i class="preview-item small"></i></li>
				<li><i class="preview-item small"></i></li>
				<li><i class="preview-item small shake-slow"></i></li>
				<li><i class="preview-item small"></i></li>
				<li><i class="preview-item small shake-rotate shake-freeze"></i></li>
				<li><i class="preview-item small shake"></i></li>
				<br />
				<li><i class="preview-item small shake-vertical"></i></li>
				<li><i class="preview-item small"></i></li>
				<li><i class="preview-item small shake-vertical shake-freeze"></i></li>
				<li><i class="preview-item small"></i></li>
				<li><i class="preview-item small shake-little shake-constant shake-constant--hover"></i></li>
				<li><i class="preview-item small shake-horizontal shake-freeze"></i></li>
				<li><i class="preview-item small shake-crazy shake-freeze"></i></li>
				<li><i class="preview-item small"></i></li>
				<br />
				<li><i class="preview-item small shake-opacity"></i></li>
				<li><i class="preview-item small"></i></li>
				<li><i class="preview-item small shake-slow shake-constant shake-constant--hover"></i></li>
				<li><i class="preview-item small shake-hard"></i></li>
				<li><i class="preview-item small"></i></li>
				<li><i class="preview-item small shake-hard"></i></li>
				<li><i class="preview-item small"></i></li>
			</ul>
			<p>Launch the animations from the parent with class 'shake-trigger' (customizable)</p>
			<div class="arrow shake-vertical-slow shake-constant"></div>
		</section>
		<section class="section code amethyst">
			<a href="#install">
				<h1 id="install">Install</h1>
			</a>
			<h4>Get started...</h4>
			<pre class="language-bash"><code>$ git clone https://github.com/elrumordelaluz/csshake.git</code></pre><br>
			<h5>or</h5>
			<pre class="language-bash"><code>$ bower install csshake</code></pre><br>
			<h5>or</h5>
			<pre class="language-bash"><code>$ npm i csshake</code></pre><br>
			<h5>or <br> <a href="https://csshake.surge.sh/" class="btn  shake-vertical-slow shake-constant">Download Center</a> <br>Download separated files for each shake animation, expanded or minified.</h5>
			<p>
        <a class="btn" href="https://cdnjs.com/libraries/csshake">
          cdnjs.com
          <span class="badge shake-constant shake-chunk">New</span>
        </a>
      </p>
				<a class="u-mt4" href="#how-to">
					<h1 id="how-to">How to use</h1>
				</a>
				<h4>Include the css file then apply classes to elements</h4>
				<pre class="language-markup"><code>&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;csshake.min.css&quot;&gt;
&lt;!-- or from surge.sh --&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://csshake.surge.sh/csshake.min.css&quot;&gt;</code></pre><br>
				<pre class="language-markup shake"><code>&lt;div class=&quot;shake&quot;&gt;&lt;/div&gt;</code></pre>
				<pre class="language-markup shake-hard"><code>&lt;div class=&quot;shake-hard&quot;&gt;&lt;/div&gt;</code></pre>
				<pre class="language-markup shake-slow"><code>&lt;div class=&quot;shake-slow&quot;&gt;&lt;/div&gt;</code></pre>
				<pre class="language-markup shake-little"><code>&lt;div class=&quot;shake-little&quot;&gt;&lt;/div&gt;</code></pre>
				<pre class="language-markup shake-horizontal"><code>&lt;div class=&quot;shake-horizontal&quot;&gt;&lt;/div&gt;</code></pre>
				<pre class="language-markup shake-vertical"><code>&lt;div class=&quot;shake-vertical&quot;&gt;&lt;/div&gt;</code></pre>
				<pre class="language-markup shake-rotate"><code>&lt;div class=&quot;shake-rotate&quot;&gt;&lt;/div&gt;</code></pre>
				<pre class="language-markup shake-opacity"><code>&lt;div class=&quot;shake-opacity&quot;&gt;&lt;/div&gt;</code></pre>
				<pre class="language-markup shake-crazy"><code>&lt;div class=&quot;shake-crazy&quot;&gt;&lt;/div&gt;</code></pre>			
				<pre class="language-markup shake-chunk"><code>&lt;div class=&quot;shake-chunk&quot;&gt;&lt;/div&gt;</code></pre>			
				<br />
				<pre class="language-markup shake-trigger">
<code>&lt;ul class=&quot;shake-trigger&quot;&gt;</code>
 <code class="shake-slow">&lt;li class=&quot;shake-slow&quot;&gt;&lt;/li&gt;</code>
<code> &lt;li&gt;&lt;/li&gt;</code>
<code> &lt;li&gt;&lt;/li&gt;</code>
 <code class="shake-hard">&lt;li class=&quot;shake-hard&quot;&gt;&lt;/li&gt;</code>
 <code>&lt;li&gt;&lt;/li&gt;</code>
 <code class="shake">&lt;li class=&quot;shake&quot;&gt;&lt;/li&gt;</code>
<code>&lt;/ul&gt;</code></pre>			
				<pre class="language-markup"><code>&lt;!-- To include only some csshake animations use this syntax --&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;csshake-slow.min.css&quot;&gt;
&lt;!-- or from surge.sh --&gt;
&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;http://csshake.surge.sh/csshake-slow.min.css&quot;&gt;</code></pre><br>
			<div class="arrow shake-vertical-slow shake-constant"></div>
		</section>

		<section class="section pear">
			<a href="#variations">
				<h1 id="variations">Variations</h1>
			</a>
			<h4>Some things you could add...</h4>
			<ul class="previews bigs">
				<li>
					<i class="preview-item big transp shake-hard shake-freeze" id="pr1">
						<span class="preview-icon">🙊</span>
					</i>
					<p class="preview-desc">Freezed after Shake</p>
				</li>
				<li>
					<i class="preview-item big transp shake-hard shake-constant shake-constant--hover" id="pr2">
						<span class="preview-icon">🙈</span>
					</i>
					<p class="preview-desc">Constant and stops on :hover</p>
				</li>
			</ul>
			<div class="dropdown">
				<select class="dropdown-select" id="shake-type">
				    <option value="" disabled selected>Select a shake</option>
				    <option value="shake-hard">Hard Shake</option>
				    <option value="shake-slow">Slow Shake</option>
				    <option value="shake-little">Little Shake</option>
				    <option value="shake-horizontal">Horizontal Shake</option>
				    <option value="shake-vertical">Vertical Shake</option>
				    <option value="shake-rotate">Rotate Shake</option>
				    <option value="shake-opacity">Opacity Shake</option>
				    <option value="shake-crazy">Crazy Shake</option>
				</select>
			</div>
			<br />
			<pre class="language-markup"><code>&lt;!-- To shake constant --&gt;
&lt;div class=&quot;shake-slow shake-constant&quot;&gt;&lt;/div&gt;
&lt;!-- and stops on :hover --&gt;
&lt;div class=&quot;shake-slow shake-constant shake-constant--hover&quot;&gt;&lt;/div&gt;</code></pre>
			<pre class="language-markup"><code>&lt;!-- Freeze animation at that point when :hover --&gt;
&lt;div class=&quot;shake-crazy shake-freeze&quot;&gt;&lt;/div&gt;</code></pre>
			<div class="arrow shake-vertical-slow shake-constant"></div>
		</section>
		
		<section class="section scooter">
			<a href="#flexibility">
				<h1 id="flexibility">More flexibility</h1>
			</a>
			<h4>The do-shake @mixin, and so on...</h4>
			<pre><code class="language-css">.my-custom-shake {
  @include do-shake(
        $name: 'my-custom-shake', /* {String} is the name for the keyframes animation */
        $h: 5px, /*  {Number} is the max number for random to assign in x axis */
        $v: 5px, /* {Number} is the max number for random to assign in y axis */
        $r: 3deg, /* {Number} is the max number for random rotation */
        $dur: 100ms, /* {Number} is the animation-duration time value */
        $precision: .02, /* {Number} is the precision of the keyframes animation. For example .02 generates keyframes each 2% and .1 each 10%. The calculation is $step: 100 * $precision; */
        $opacity: false, 
        $q: infinite, /* {String} is the animation-iteration-count value */
        $t: ease-in-out, /* {String} animation-timing-function value */
        $delay: null, /* {Number} animation-delay time value */
        $chunk: 100%); /* {Number} is the part of the keyframes where apply the animation */
}

/* Example shake-crazy */
.shake-crazy { 
	@include do-shake('shake-crazy', 40, 40, 20, 100ms, .1, $opacity: true); 
}
</code></pre>
			<div class="arrow shake-vertical-slow shake-constant"></div>
		</section>
		<section class="section dolly dark-txt">
			<a href="#last-words">
				<h1 id="last-words">Last words</h1>
			</a>
			<h4>The about, the idea, and the desire to hear from you to improve the code...</h4>
			<p>I had to make a shake animation for a big project. I did it in vanilla CSS at the begining.<br>After I finished it I discovered <a class="shake shake-constant shake-little dib" href="http://jackrugile.com/jrumble/">this</a> cool jQuery plugin by <a class="shake dib" href="https://twitter.com/jackrugile">@jackrugile</a>.<br> Then I started to think I should make this little CSS project.</p>
			<a class="btn carrot shake-vertical-slow shake-constant shake-constant--hover" href="http://csshake.surge.sh/csshake.min.css">Download</a>
			<small>https://csshake.surge.sh/csshake.min.css</small>
			<a class="btn light shake-rotate shake-freeze" href="https://github.com/elrumordelaluz/csshake">Fork me on Github</a>
			<p><a href="https://twitter.com/share" data-via="elrumordelaluz" class="twitter-share-button">Tweet</a>
        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
        <iframe src="https://ghbtns.com/github-btn.html?user=elrumordelaluz&amp;repo=csshake&amp;type=star&amp;count=true" frameborder="0" scrolling="0" width="106" height="20px"></iframe>
      </p>
			<footer>Made with &#9829; by <a class="shake-chunk shake-constant shake-constant--hover dib" href="http://twitter.com/elrumordelaluz">@elrumordelaluz</a>, using <a href="http://sass-lang.com/">Sass</a>.<br>This site uses <a href="http://prismjs.com/">Prism.js</a> by <a href="http://twitter.com/LeaVerou">Lea Verou</a></footer>
		</section>
	</div>

	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.9.0/prism.min.js"></script>
	<script async defer>
 var selector = document.querySelector('#shake-type')
var pr1 = document.querySelector('#pr1')
var pr2 = document.querySelector('#pr2')

var handleChangeShake = function handleChangeShake(e) {
  var regex = /shake-(hard|slow|little|horizontal|vertical|rotate|opacity|crazy)/
  var classToRemove = regex.exec(pr1.classList.value)[0].trim()
  pr1.classList.remove(classToRemove)
  pr1.classList.add(e.target.value)
  pr2.classList.remove(classToRemove)
  pr2.classList.add(e.target.value)
}

selector.addEventListener('change', handleChangeShake)
</script>
</body>
</html>
